<template>
  <addFileView ref="addFileView" />
  <addEditPanFoldersView ref="addEditPanFoldersView" />
  <addEditPanFiles ref="addEditPanFiles" />
  <panFoldersListView ref="panFoldersListView" />
  <el-main v-loading="loading">
    <div class="app-table">
      <div class="app-body">
        <div class="app-search">
          <el-form :inline="true" class="demo-form-inline" v-model="form">
            <el-form-item label="文件名称">
              <el-input placeholder="搜索全部文件" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="onSubmit" @keyup.enter="searchEnter">搜索</el-button>

              <el-upload ref="fileInput" multiple :auto-upload="false" :show-file-list="false" v-if="isEffect == 0"
                :on-change="onFileChange" style="margin-left: 10px; margin-right: 10px">
                <el-button type="success" @click="add">上传
                  <el-icon class="el-icon--right">
                    <Upload />
                  </el-icon>
                </el-button>
              </el-upload>
              <el-button type="warning" plain @click="addPanFolders" v-if="isEffect == 0">新建文件夹</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div style="padding-bottom: 20px; padding-top: 10px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="goMain()">全部文件</el-breadcrumb-item>

            <el-breadcrumb-item v-for="(item, index) in items"><a @click="getData(item.id, index)">{{
    item.name
  }}</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-table size="small" :data="list" style="width: 100%" @row-dblclick="clickRow"
          :row-class-name="tableRowClassName">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="文件名">
            <template #default="scope">
              <div style="display: flex">
                <el-image :src="iconImage" v-if="getFileType(scope.row) == 'image'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconWord" v-else-if="getFileType(scope.row) == 'word'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconPdf" v-else-if="getFileType(scope.row) == 'pdf'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconExcel" v-else-if="getFileType(scope.row) == 'excel'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconZip" v-else-if="getFileType(scope.row) == 'zip'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconRar" v-else-if="getFileType(scope.row) == 'rar'"
                  style="width: 40px; padding: 7px"></el-image>
                <el-image :src="iconPpt" v-else-if="getFileType(scope.row) == 'ppt'"
                  style="width: 40px; padding: 7px"></el-image>

                <el-image :src="iconFile" v-else-if="scope.row.fileSize" style="width: 40px; padding: 7px"></el-image>

                <!-- <el-image :src="icon2"  v-else-if="scope.row.type==2" style="width: 40px;padding: 5px;"></el-image> -->
                <!-- <el-image :src="icon2"  v-else-if="scope.row.type==3" style="width: 40px;padding: 5px;"></el-image> -->

                <el-image :src="iconFolder" v-else style="width: 40px; padding: 5px"></el-image>

                <span style="line-height: 40px; margin-left: 10px">{{
    scope.row.name
  }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="大小" width="120">
            <template #default="scope">
              {{ scope.row.fileSize ? convertSize(scope.row.fileSize) : "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="160" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button size="small" type="warning" plain v-if="isEffect == 1" @click="recoverPanFiles(scope.row)">还原
              </el-button>
              <el-button size="small" type="danger" plain v-if="isEffect == 1" @click="realDeletePanFiles(scope.row)">删除
              </el-button>

              <el-button size="small" type="warning" v-if="isEffect == 0" @click="downLoadPanFiles(scope.row)">下载
              </el-button>

              <el-dropdown style="margin-left: 10px" v-if="isEffect == 0">
                <el-button type="info" size="small">更多<el-icon class="el-icon--right">
                    <ArrowDown />
                  </el-icon></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- <el-dropdown-item @click="share(scope.row)"
                      >共享</el-dropdown-item
                    > -->
                    <el-dropdown-item @click="edit(scope.row)">重命名</el-dropdown-item>
                    <el-dropdown-item @click="copyTo(scope.row, 1)">复制到</el-dropdown-item>
                    <el-dropdown-item @click="copyTo(scope.row, 2)">移动到</el-dropdown-item>
                    <el-dropdown-item @click="deletePanFiles(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
      </div>
      <bottomView />
    </div>
  </el-main>

  <div class="app-table" style="padding-left: 0px" v-show="showRight">
    <div class="app-body right-list">
      <addEditPanFilesView ref="addEditPanFilesView" />
    </div>
  </div>
</template>
<script>
import addEditPanFilesView from "@/components/pan/addPanFileRightView.vue";
import addEditPanFoldersView from "@/components/pan/addEditPanFolders.vue";
import addEditPanFiles from "@/components/pan/addEditPanFiles.vue";
import panFoldersListView from "@/views/pan/PanFoldersListView.vue";
import axios from "axios";
import bottomView from "@/components/bottom.vue";

import addFileView from "@/components/addExcelFile.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import {
  Picture as IconPicture,
  Upload,
  Files,
  // dropdown,
  ArrowDown,
  Folder,
} from "@element-plus/icons-vue";

export default {
  name: "PanFilesListView",
  data() {
    return {
      iconFolder: require("@/assets/folder.png"),
      iconImage: require("@/assets/image.png"),
      iconFile: require("@/assets/file-file.png"),
      iconWord: require("@/assets/word.png"),
      iconPdf: require("@/assets/pdf.png"),
      iconExcel: require("@/assets/excel.png"),
      iconZip: require("@/assets/zip.png"),
      iconRar: require("@/assets/zip.png"),
      iconPpt: require("@/assets/ppt.png"),
      type: 0,
      loading: false,
      items: [],
      title: "",
      page: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      showRight: false,
      list: [],
      form: {
        name: "",
        teacherNumber: "",
      },
      files: [
        { id: 1, size: 1024 }, // 1 KB
        { id: 2, size: 1048576 }, // 1 MB
        { id: 3, size: 1073741824 }, // 1 GB
        { id: 4, size: 1099511627776 }, // 1 TB
      ],
      isEffect: "",
      type: "",
      level: 1,
      folderId: 0,
    };
  },
  components: {
    httpService,
    panFoldersListView,
    addEditPanFiles,
    addEditPanFilesView,
    addEditPanFoldersView,
    addFileView,
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
    Upload,
    Folder,
    Files,
    // dropdown,
    ArrowDown,
    bottomView,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {
    if (this.$route.query.ef) {
      this.isEffect = this.$route.query.ef;
    }
    console.log(this.$route.query);
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    } else {
      this.type = "";
    }
    this.getPanFilesList();
  },
  watch: {
    $route() {
      this.folderId = 0;
      this.items = [];
      if (this.$route.query.ef) {
        this.isEffect = this.$route.query.ef;
      }
      console.log(this.$route.query);
      if (this.$route.query.type) {
        this.type = this.$route.query.type;
      } else {
        this.type = "";
      }
      this.getPanFilesList();
    },
  },
  methods: {
    downLoadPanFiles(row) {
      this.loading = true;
      //添加进度条
      if (typeof row.parentFolderId === "undefined") {
        axios({
          url: "/javaApi/panFiles/download/" + row.id,
          method: "GET",
          responseType: "blob", // Set the response type to 'blob' to handle binary data
        })
          .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response]));
            const link = document.createElement("a");
            link.href = url;
            link.setAttribute("download", row.name); // Set the desired file name
            document.body.appendChild(link);
            link.click();
            this.loading = false;

          })
          .catch((error) => {
            console.error(error);
            this.loading = false;

          });
      } else {
        axios({
          url: "/javaApi/panFolders/download/" + row.id,
          method: "GET",
          responseType: "blob", // Set the response type to 'blob' to handle binary data
        })
          .then((response) => {
            if (response.size <= 64) {
              ElMessage.error("当前文件夹总文件过大，请单独进行下载。");
            } else {
              const url = window.URL.createObjectURL(new Blob([response]));
              const link = document.createElement("a");
              link.href = url;
              link.setAttribute("download", row.name + ".zip"); // Set the desired file name
              document.body.appendChild(link);
              link.click();
            }
            this.loading = false;
          })
          .catch((error) => {
            console.error(error);
            this.loading = false;

          });
      }
    },
    getFileType(row) {
      if (row.name) {
        const extension = row.name.split(".").pop().toLowerCase();
        const fileTypes = {
          jpg: "image",
          jpeg: "image",
          png: "image",
          gif: "image",
          bmp: "image",
          tiff: "image",
          doc: "word",
          docx: "word",
          pdf: "pdf",
          xls: "excel",
          xlsx: "excel",
          zip: "zip",
          rar: "rar",
          ppt: "ppt",
          pptx: "ppt",
        };

        return fileTypes[extension] || "other";
      } else {
        return "other";
      }
    },
    copyTo(row, flag) {
      if (flag == 1) {
        this.$refs.panFoldersListView.title = "复制到";
      } else {
        this.$refs.panFoldersListView.title = "移动到";
      }
      this.$refs.panFoldersListView.getPanFoldersList();
      this.$refs.panFoldersListView.row = row;
      this.$refs.panFoldersListView.flag = flag;
      this.$refs.panFoldersListView.dialogFormVisible = true;
    },
    goMain() {
      this.folderId = 0;
      this.items = [];
      this.getPanFilesList();
    },
    getData(folderId, index) {
      this.folderId = folderId;
      this.items.splice(index + 1); // Remove the last element
      this.getPanFilesList();
    },
    clickRow(row, l, e) {
      console.log(l);
      console.log(e);
      if (this.isEffect == 0) {
        if (!row.folderId) {
          const isObjectIncluded = this.items.includes(row);
          if (!isObjectIncluded) {
            if (this.level == 1) {
              this.items = [];
              this.items.push(row);
              this.level = this.level + 1;
            } else {
              this.items.push(row);
              this.level = this.level + 1;
            }
          }
          this.folderId = row.id;
          this.getPanFilesList();
        }
      }
    },
    convertSize(bytes) {
      const k = 1024;
      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
      if (bytes === 0) return "0 Bytes";
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      if (i < 1) {
        return bytes + " " + sizes[i];
      }
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    },
    onFileChange(file, files) {
      this.showRight = true;
      this.$refs.addEditPanFilesView.folderId = this.folderId;
      this.$refs.addEditPanFilesView.uploadIndex = 0;
      this.$refs.addEditPanFilesView.onFileChange(file, files);
    },
    closeRight() {
      this.showRight = false;
    },
    clearFiles() {
      this.$refs.fileInput.clearFiles();
    },

    searchEnter: function (e) {
      // 使用 which 和 keyCode 属性来解决兼容问题
      var keyCode = window.event ? e.keyCode : e.which;
      var val = e.target.value;
      if (keyCode == 13 && val) {
        this.getPanFilesList();
      }
    },
    addPanFolders() {
      this.$refs.addEditPanFoldersView.title = "新建文件夹";
      this.$refs.addEditPanFoldersView.addPanFoldersForm.parentFolderId =
        this.folderId;
      this.$refs.addEditPanFoldersView.dialogFormVisible = true;
    },
    add() {
      this.$refs.addEditPanFilesView.title = "添加文件";
      this.$refs.addEditPanFilesView.dialogFormVisible = true;
    },
    editPanFiles(obj) {
      this.$refs.addEditPanFilesView.title = "修改信息";
      this.$refs.addEditPanFilesView.getPanFilesById(obj.id);
      this.$refs.addEditPanFilesView.dialogFormVisible = true;
    },
    edit(obj) {
      if (obj.folderId || obj.folderId === 0) {
        this.$refs.addEditPanFiles.title = "重命名";
        this.$refs.addEditPanFiles.getPanFilesById(obj.id);
        this.$refs.addEditPanFiles.dialogFormVisible = true;
      } else {
        this.$refs.addEditPanFoldersView.title = "重命名";
        this.$refs.addEditPanFoldersView.getPanFoldersById(obj.id);
        this.$refs.addEditPanFoldersView.dialogFormVisible = true;
      }
    },
    share(obj) {
      ElMessageBox.confirm("确定要共享文件/文件夹吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (obj.folderId || obj.folderId == 0) {
            httpService(
              "/javaApi/panFiles/share",
              "id=" + obj.id,
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
              } else {
                ElMessage.error(data.message);
              }
            });
          } else {
            httpService(
              "/javaApi/panFolders/share",
              "id=" + obj.id,
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
              } else {
                ElMessage.error(data.message);
              }
            });
          }
        })
        .catch(() => { });
    },
    realDeletePanFiles(obj) {
      ElMessageBox.confirm("确定要彻底删除文件/文件夹吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (obj.folderId || obj.folderId == 0) {
            httpService(
              "/javaApi/panFiles/deleteById",
              "id=" + obj.id,
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          } else {
            httpService(
              "/javaApi/panFolders/deleteById",
              "id=" + obj.id,
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          }
        })
        .catch(() => { });
    },
    recoverPanFiles(obj) {
      ElMessageBox.confirm("确定要恢复吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (obj.folderId || obj.folderId == 0) {
            httpService(
              "/javaApi/panFiles/edit",
              "id=" + obj.id + "&isEffect=0",
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          } else {
            httpService(
              "/javaApi/panFolders/deleteByIdLogic",
              "id=" + obj.id + "&isEffect=0",
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          }
        })
        .catch(() => { });
    },
    deletePanFiles(obj) {
      ElMessageBox.confirm("确定要加入回收站吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (obj.folderId || obj.folderId == 0) {
            httpService(
              "/javaApi/panFiles/edit",
              "id=" + obj.id + "&isEffect=1",
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          } else {
            httpService(
              "/javaApi/panFolders/deleteByIdLogic",
              "id=" + obj.id + "&isEffect=1",
              "post"
            ).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.getPanFilesList();
              } else {
                ElMessage.error(data.message);
              }
            });
          }
        })
        .catch(() => { });
    },
    reloadData() {
      this.page = 1;
      this.getPanFilesList();
    },
    importExcel() {
      this.$refs.addFileView.dialogFormVisible = true;
      this.$refs.addFileView.title = "批量导入文件表";
      this.$refs.addFileView.uploadApiUrl = "/javaApi/panFiles/importExcel";
    },
    exportExcel() {
      httpService(
        "/javaApi/panFiles/exportExcel",
        {
          name: this.form.name,
          teacherNumber: this.form.teacherNumber,
        },
        "get"
      ).then((data) => {
        if (data.code == 200) {
          window.open(data.message, "_blank");
        }
      });
    },
    onSubmit() {
      this.getPanFilesList();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;
      this.getPanFilesList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getPanFilesList();
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },
    getPanFilesList() {
      httpService(
        "/javaApi/panFiles/listAll",
        {
          name: this.form.name,
          teacherNumber: this.form.teacherNumber,
          isEffect: this.isEffect,
          type: this.type,
          folderId: this.folderId,
        },
        "get"
      ).then((data) => {
        this.list = data.object.panFolders;
        this.list = this.list.concat(data.object.panFiles);
        console.log(this.list);
      });
    },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.right-list {
  width: 360px;
  background: white;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  /* min-height: calc(100vh - 120px); */
  min-height: calc(100vh - 243px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}

.el-breadcrumb__item {
  float: left;
  display: flex;
  padding: 5px 0px;
  align-items: center;
}
</style>
